<template lang="html">
  <!-- PC版页面 -->
  <div>
    <!-- 头部 -->
    <header>
      <div class="container">
        <div class="header-left">青年良品</div>
        <div class="header-right">
          <ul>
            <li>进入魅族商城</li>
            <li>登录</li>
            <li>注册</li>
          </ul>
        </div>
      </div>
    </header>
    <!-- 内容 -->
    <section>
      <!-- banner01 -->
      <div class="banner01">
        <div class="container">
          <!-- 预约 -->
          <div class="appointment">
            输入您的手机号
          </div>
        </div>
      </div>
      <!-- banner02 -->
      <div class="banner02 wrapper">
        <div class="container"></div>
      </div>
      <!-- banner03 -->
      <div class="banner03 wrapper">
        <div class="container"></div>
      </div>
      <!-- banner04 -->
      <div class="banner04 wrapper">
        <div class="container"></div>
      </div>
      <!-- banner05 -->
      <div class="banner05 wrapper">
        <div class="container"></div>
      </div>
      <!-- banner06 -->
      <div class="banner06 wrapper">
        <div class="container">
          <ul class="list clearfix">
            <li class="item" v-for="item in list">
              <a class="clearfix" href="javascript:void(0);">
                <div class="detail clearfix">
                  <img :src="item.src" alt="">
                  <div class="desc fl">
                    <h3 class="no-wrap">{{item.title}}</h3>
                    <h4 class="no-wrap">{{item.desc}}</h4>
                    <p class="price">
                      <span class="discount">{{item.discount}}</span>
                      <span class="new rmb-price"><em>¥</em><span>10</span></span>
                      <span class="old rmb-price"><em>¥</em><span>{{item.price}}</span></span>
                    </p>
                    <div class="btn">立即购买</div>
                  </div>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <!-- introduction -->
      <div class="introduction wrapper">
        <!-- introduction-header -->
        <div class="introduction-header"></div>
        <!-- introduction-content -->
        <div class="container">
          <ul class="intro-list">
            <li class="intro-item item01"></li>
            <li class="intro-item item02"></li>
            <li class="intro-item item03"></li>
            <li class="intro-item item04"></li>
            <li class="intro-item item05"></li>
            <li class="intro-item item06"></li>
            <li class="intro-item item07"></li>
            <li class="intro-item item08"></li>
            <li class="intro-item item09"></li>
            <li class="intro-item item10"></li>
            <li class="intro-item item11"></li>
          </ul>
        </div>
      </div>
    </section>
    <!-- 页尾 -->
    <footer>

    </footer>
  </div>
</template>

<script>
const list = [
  { id: 1, src: "src/assets/images/product/1449643778-41533.png@680x680.jpg", href: "", price: 169, discount: 0.47, title: "Skullcandy 入耳耳机", desc: "内置麦克风，防汗、防脱落，高低中频均享。" },
  { id: 2, src: "src/assets/images/product/1457788284-57467.png@480x480.jpg", href: "", price: 199, discount: 0.5, title: "魅族EP-31耳机", desc: "舒适均衡 精致优雅" },
  { id: 3, src: "src/assets/images/product/1465698264-58364.jpg@480x480.jpg", href: "", price: 199, discount: 0.5, title: "ME20入耳式耳机", desc: "享受 不绝于耳" },
  { id: 4, src: "src/assets/images/product/Cgbj0VmRZCuAfRtpAADkzYNWvkY311.png@480x480.jpg", href: "", price: 199, discount: 0.5, title: "魅族路由器 极速版", desc: "天生不凡 快狠稳" },
  { id: 1, src: "src/assets/images/product/1449643778-41533.png@680x680.jpg", href: "", price: 169, discount: 0.47, title: "Skullcandy 入耳耳机", desc: "内置麦克风，防汗、防脱落，高低中频均享。" },
  { id: 2, src: "src/assets/images/product/1457788284-57467.png@480x480.jpg", href: "", price: 199, discount: 0.5, title: "魅族EP-31耳机", desc: "舒适均衡 精致优雅" },
  { id: 3, src: "src/assets/images/product/1465698264-58364.jpg@480x480.jpg", href: "", price: 199, discount: 0.5, title: "ME20入耳式耳机", desc: "享受 不绝于耳" },
  { id: 4, src: "src/assets/images/product/Cgbj0VmRZCuAfRtpAADkzYNWvkY311.png@480x480.jpg", href: "", price: 199, discount: 0.5, title: "魅族路由器 极速版", desc: "天生不凡 快狠稳" },
]

export default {
  data() {
    return {
      list: list
    }
  },
  created() {

  }
}
</script>

<style lang="scss" scoped>
@import "../assets/scss/default.scss";
// header
header {
  font-size: 14px;
  .header-left {
    float: left;
  }
  .header-right {
    float: right;
    ul {
      display: flex;
      li {
        margin-right: 10px;
      }
    }
  }
}
// banner
.banner01 {
  width: 100%;
  height: 600px;
  // background-image: url(../assets/images/banner01.jpg);
  background-image: -webkit-image-set(url(https://openfile.meizu.com/group1/M00/02/23/Cgbj0FnCImuAXE9JAAw84oPAs_8356.jpg) 1x, url(https://openfile.meizu.com/group1/M00/02/31/Cgbj0VnCImuAeiekAA5PjbKgiV4129.jpg) 2x);
  background-position: center 0;
  background-repeat: no-repeat;
  background-color: $white;
  font-size: 20px;
  color: $white;
  .appointment {
    height: 600px;
  }
}
.banner02 {
  height: 399px;
  background: #53d4c3 url(../assets/images/banner03.jpg) top center no-repeat;
}
.banner03 {
  height: 250px;
  background: #53d4c3 url(../assets/images/banner04.jpg) top center no-repeat;
}
.banner04 {
  background: #177bd9 url(../assets/images/banner05.jpg) top center no-repeat;
  height: 615px;
}
.banner05 {
  background: #2194e7 url(../assets/images/banner06.jpg) top center no-repeat;
  height: 198px;
}
.banner06 {
  background: #33b8f1;
  padding-top: 0px;
  padding-bottom: 0px;
  .list {
    width: 1000px;
    margin: 0 auto;
    .item {
      background-color: $white;
      width: 240px;
      height: 390px;
      margin: 5px;
      position: relative;
      overflow: hidden;
      transition: all .2s ease;
      float: left;
      &:hover {
        box-shadow: 0 15px 30px rgba(0,0,0,.1);
        transform: translate3d(0,-2px,0);
      }
      a {
        padding: 30px;
        display: inline-block;
      }
      .detail {
        text-align: center;
        img {
          width: 180px;
          height: 180px;
          display: inline-block;
        }
        .desc {
          width: 180px;
          text-align: center;
          line-height: 1.2;
          h3 {
            width: 180px;
            font-size: 18px;
            color: #333;
            margin: 15px 0 0;
          }
          h4 {
            width: 180px;
            height: 20px;
            margin: 5px 0 0;
            font-size: 14px;
            color: #666;
          }
          .price {
            margin-top: 10px;
            display: table;
            margin: 0 auto;
            font-size: 14px;
            .rmb-price {
              font-family: Arial,sans-serif;
            }
            .discount {
              color: #f6514c;
              font-size: 90%;
              text-align: center;
              border: 1px solid #f6514c;
              padding: 0 8px;
              margin-right: 5px;
              float: left;
              height: 21px;
              line-height: 21px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .new {
              font-size: 20px;
              color: #f6514c;
            }
            .old {
              font-size: 14px;
              color: #999;
              text-decoration: line-through;
              margin-left: 4px;
            }
            em {
              font-style: normal;
            }
          }
          .btn {
            background-color: #f6514c;
            margin: 15px auto 0;
            display: inline-block;
            color: $white;
            width: 135px;
            height: 40px;
            line-height: 38px;
            font-size: 16px;
            &:hover {
              opacity: .9;
            }
          }
        }
      }
    }
  }
}
.introduction {
  .introduction-header {
    background: #fff url(../assets/images/introduction/Cgbj0VmdEmOAHlEMAAAJhgCrDQA264.png) top center no-repeat;
    height: 83px;
  }
  .intro-list {
    width: 100%;
    .intro-item {
      &.item01 {
        background: #fff url(../assets/images/introduction/Cgbj0FnA7mGAUu7NAA6i8QBkb6k054.png) top center no-repeat;
        height: 909px;
      }
      &.item02 {
        background: #fff url(../assets/images/introduction/Cgbj0VnA7mCAMA9AAAXSn5z9GzU697.png) top center no-repeat;
        height: 900px;
      }
      &.item03 {
        background: #fff url(../assets/images/introduction/Cgbj0FnA7mCAWzS7AAMEMf4bsE8452.png) top center no-repeat;
        height: 910px;
      }
      &.item04 {
        background: #fff url(../assets/images/introduction/Cgbj0VnA7mKAXc_tAAOIkR3kchM465.png) top center no-repeat;
        height: 824px;
      }
      &.item05 {
        background: #fff url(https://openfile.meizu.com/group1/M00/02/18/Cgbj0FnA7mSAJOCkAAgo6HXxvvM501.png) top center no-repeat;
        height: 988px;
      }
      &.item06 {
        background: #fff url(https://openfile.meizu.com/group1/M00/02/26/Cgbj0VnA7mSAaIRRAARs8l7P5Fk739.png) top center no-repeat;
        height: 900px;
      }
      &.item07 {
        background: #fff url(https://openfile.meizu.com/group1/M00/02/18/Cgbj0FnA7mWAKrmMAAlVH9WiGPc967.png) top center no-repeat;
        height: 740px;
      }
      &.item08 {
        background: #fff url(https://openfile.meizu.com/group1/M00/02/26/Cgbj0VnA7mWAYnEdAAYdvahhG2c827.png) top center no-repeat;
        height: 800px;
      }
      &.item09 {
        background: #fff url(https://openfile.meizu.com/group1/M00/02/18/Cgbj0FnA7maAJwDtAAKc6ZspDhY187.png) top center no-repeat;
        height: 870px;
      }
      &.item10 {
        background: #fff url(https://openfile.meizu.com/group1/M00/02/18/Cgbj0FnA7miAZyjNAAmn2AawOMU878.png) top center no-repeat;
        height: 800px;
      }
      &.item11 {
        background: #fff url(https://openfile.meizu.com/group1/M00/02/26/Cgbj0VnA7miAWdviAAA--6SyLqs363.png) top center no-repeat;
        height: 190px;
      }
    }
  }
}
.wrapper {
  width: 100%;
}
.container {
  width: 1240px;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
}
</style>
